
<template>
  <div v-loading="loading" class="main-container">
    <div class="head">
      <flexbox class="head__body">
        <!-- <xr-radio-menu
          :options="rangeOptions"
          v-model="filterDataType"
          width="170"
          @select="radioMenuSelect"
        >
          <flexbox slot="reference" class="user-box">
            <i v-if="filterDataType != 1" class="wk wk-multi-user user-icon" />
            <xr-avatar
              v-else
              :name="avatarData.realname"
              :size="28"
              :src="avatarData.img"
            />
            <span class="username">{{ avatarData.realname }}</span>
            <span class="el-icon-caret-bottom icon" />
          </flexbox>
        </xr-radio-menu> -->
        <!-- 部门模块 -->
        <xh-structure-cell-mul
          radio
          class="xh-structure-cell"
          @valueChange="structureChange"
          type="1"
          v-if="showDept"
          v-loading="deptLoading"
          ref="structurecell"
        />
        <!-- 部门模块结束 -->
        <!-- 人员模块 -->
        <xh-struc-user-cell-mul
          radio
          class="xh-struc-user-cell-mul"
          @valueChange="structureChange1"
          type="1"
          v-if="showDept"
          v-loading="deptLoading"
          ref="usermul"
        />
        <!-- 人员模块结束 -->
        <el-input
          style="width: 140px"
          v-model="periodsVal"
          class="el-input"
          placeholder="请输入训练营期数"
          oninput="value=value.replace(/[^\d]/g,'')"
        ></el-input>
        <el-select
          clearable
          v-model="categoriesVal"
          placeholder="请选择大类："
          style="margin-left: 15px; width: 140px"
        >
          <el-option
            v-for="item in categoriesOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          clearable
          v-model="salesTypeVal"
          placeholder="请选择销售类型："
          style="margin-left: 15px; width: 140px"
        >
          <el-option
            v-for="item in salesTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          clearable
          v-model="repetition"
          placeholder="是否重复："
          style="margin-left: 15px; width: 140px"
        >
          <el-option
            v-for="item in repetitionOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <el-select
              placeholder="请选择"
              v-model="dataVal"
            >
              <el-option
                v-for="item in data"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
                <span style="float: left">{{ item.label }}</span>
              </el-option>
            </el-select>

        <el-button
          type="primary"
          style="width: 100px; height: 35px"
          @click="searchClick"
          >查询</el-button
        >
      </flexbox>
    </div>
    <div style="margin-top: 105px"></div>
    <div class="content">
      <div class="table-content">
        <div class="handle-bar">
          <el-button class="export-btn" @click="exportClick">导出</el-button>
        </div>
        <el-table
          v-if="showTable"
          :data="list"
          stripe
          border
          highlight-current-row
          height="33vw"
        >
          <el-table-column
            v-for="(item, index) in fieldList"
            :key="index"
            :prop="item.field"
            :label="item.name"
            min-width="100"
            align="center"
            header-align="center"
            show-overflow-tooltip
          />
        </el-table>
        <div class="autoTable">
          <div >{{ coutListtip.source }}</div>
          <div >{{ coutListtip.formNum }}</div>
          <div >{{ coutListtip.addWechatNum }}</div>
          <div >{{ coutListtip.addWechatRate }}</div>
          <div >{{ coutListtip.dealNum }}</div>
          <div >{{ coutListtip.money }}</div>
          <div >{{ coutListtip.transRate }}</div>
        </div>
      </div>
    </div>
    <!-- 员工部门选择 -->
    <members-dep-dialog
      :visible.sync="membersDepVisible"
      :user-checked-data="filterValue.users"
      :dep-checked-data="filterValue.strucs"
      radio
      @close="membersDepCancel"
      @confirm="membersDepSelect"
    />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import BaseMixin from "../mixins/Base";
import SortMixin from "../mixins/Sort";
import SummaryMixin from "../mixins/Summary";
import { sourceRateStat, sourceRateStatExportAPI, queryTimeData } from "@/api/bi/customer";
import XrRadioMenu from "@/components/Menu/XrRadioMenu";
import MembersDepDialog from "@/components/SelectEmployee/MembersDepDialog";
import XhStructureCellMul from "@/components/CreateCom/XhStructureCellMul";
import XhStrucUserCellMul from "@/components/CreateCom/XhStrucUserCellMul";
import Lockr from "lockr";
export default {
  /** 渠道数据统计 */
  name: "CustomerTotalStatistics",
  mixins: [BaseMixin, SortMixin, SummaryMixin],
  components: {
    XrRadioMenu,
    XhStructureCellMul,
    XhStrucUserCellMul,
    MembersDepDialog,
  },
  data() {
    return {
      loading: false,
      axisOption: null,

      postParams: {}, // 筛选参数

      dataIndex: null,

      list: [],
      axisList: [],
      fieldList: [
        { field: "source", name: "渠道名称" },
        { field: "formNum", name: "线索数量" },
        { field: "addWechatNum", name: "加好友数量" },
        { field: "addWechatRate", name: "加好友率" },
        { field: "dealNum", name: "成交量" },
        { field: "money", name: "成交金额" },
        { field: "transRate", name: "成交转化率" },
      ],
      repetition: "", //是否重复
      periodsVal: "", //训练营期数
      categoriesVal: "", //大类
      salesTypeVal: "", //销售类型
      hqdateVal: "", //日期
      repetitionOptions: [
        {
          value: "是",
          label: "是",
        },
        {
          value: "否",
          label: "否",
        },
      ],
      salesTypeOptions: [
        {
          value: "1",
          label: "电销",
        },
        {
          value: "2",
          label: "网销",
        },
      ], //销售类型

      categoriesOptions: [
        {
          value: "1",
          label: "电商美工",
        },
        {
          value: "2",
          label: "手绘插画",
        },
        {
          value: "3",
          label: "影视后期",
        },
      ], //大类
      deptId: "",
      deptIdArray: [], //选中部门回显
      userArray: [], // 选中人员
      rangeOptions: [
        { label: "全公司", command: 5 },
        { label: "仅本部门", command: 3 },
        { label: "仅本人", command: 1 },
        { label: "本部门及下属部门", command: 4 },
        { label: "本人及下属", command: 2 },
        { label: "渠道销售情况", command: 6 },
      ],
      filterDataType: 5,
      filterValue: {
        dataType: 5,
        users: [],
        strucs: [],
        dataForm: 1,
        deptIdArray: "",
        timeLine: {
          type: "default",
          value: "month",
        },
      },
      showDept: true,
      deptLoading: false,
      membersDepVisible: false,
      coutListtip: {},
      dataVal: 0,
      data: []
    };
  },

  computed: {
    ...mapGetters(["userInfo", "collapse"]),
    // 如果只筛选一个人则头像显示当前被筛选人的头像，否则显示默认错误头像
    avatarData() {
      if (this.filterValue.dataType === "custom") {
        const users = this.filterValue.users || [];
        if (users.length) {
          return users[0];
        }
        const strucs = this.filterValue.strucs || [];
        if (strucs.length) {
          return {
            realname: strucs[0].name,
            img: "",
          };
        }
      }

      if (this.filterValue.dataType == 1) {
        return this.userInfo;
      }
      return {
        showIcon: true,
        realname: {
          5: "全公司",
          1: "仅本人",
          2: "本人及下属",
          3: "仅本部门",
          4: "本部门及下属部门",
        }[this.filterValue.dataType],
      };
    },
  },
  watch: {
    // data: "time_value",
    dataVal(nVal,oVal){
      this.dataVal = nVal;
      this.postParams.classId = nVal;
    }
  },
  mounted() {
    // if (this.hqdateVal != null) {
    //   this.postParams.startTime = this.hqdateVal[0] + " 00:00:00"; //开始时间
    //   this.postParams.endTime = this.hqdateVal[1] + " 23:59:59"; //结束时间
    // } else {
    //   this.postParams.startTime = ""; //开始时间
    //   this.postParams.endTime = ""; //结束时间
    // }
    this.queryTimeDataToSelect();
  },
  created() {
    // this.getRecordList();
    // this.setDate();
  },
  methods: {
    queryTimeDataToSelect(){
      queryTimeData({})
        .then((res) => {
          if(res.data.length != 0){
            for(var i=0;i<res.data.length;i++){
            if(i==0){
              this.postParams.classId = res.data[i].id;
              console.log(this.postParams);
              this.dataVal = res.data[i].id;
            }
            this.data.push({label: res.data[i].className, value: res.data[i].id});
          }
        }else{
          this.data.push({label: '请选择', value: 0});
        }

    this.getRecordList();
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // time_value(value) {
    //   console.log(value);
    //   if (value === null) {
    //     this.postParams.startTime = ""; //开始时间
    //     this.postParams.endTime = ""; //结束时间
    //     this.postParams.type = "all";
    //     this.getRecordList();
    //   }
    // },
    //获取当前月份第一天和最后一天
    // setDate() {
    //   let curDate = new Date();
    //   let y = curDate.getFullYear();
    //   let m = curDate.getMonth() + 1; //本身就得+1才等于当前月份，然而我要计算下一个月，所以直接+2
    //   if (m > 12) {
    //     m = 1;
    //     y++;
    //   }
    //   let monthLastDay = new Date(y, m, 0).getDate();
    //   var MonthFirst = y + "-" + (m < 10 ? "0" + m : m) + "-" + "01";
    //   var MonthLast =
    //     y +
    //     "-" +
    //     (m < 10 ? "0" + m : m) +
    //     "-" +
    //     (monthLastDay < 10 ? "0" + monthLastDay : monthLastDay);

    //   this.hqdateVal = [MonthFirst, MonthLast];
    // },

    /**
     * 查询点击
     *
        categories: "1"
        deptIdArray: [14852, 14861, 14868]
        endTime: "2021-12-02"
        periods: "62"
        salesType: "2"
        startTime: "2021-11-01"
        type: "month"
     */
    searchClick() {
      if (this.deptIdArray !== "" && this.deptIdArray.length > 0) {
        //当部门不为空时，获取部门数据，并清空公司员工数据
        this.postParams.deptIdArray = this.deptIdArray;
        this.postParams.dataType = 7;
      } else if (this.userArray !== "" && this.userArray.length > 0) {
        this.postParams.userArray = this.userArray;
        this.postParams.dataType = 8;
      } else {
        this.postParams.dataType = 5;
      }
      // if (this.hqdateVal != null) {
      //   this.postParams.startTime = this.hqdateVal[0] + " 00:00:00"; //开始时间
      //   this.postParams.endTime = this.hqdateVal[1] + " 23:59:59"; //结束时间
      // } else {
      //   this.postParams.startTime = ""; //开始时间
      //   this.postParams.endTime = ""; //结束时间
      // }
      this.postParams.categories = Number(this.categoriesVal); //大类
      this.postParams.periods = this.periodsVal; //训练营期数
      this.postParams.salesType = Number(this.salesTypeVal); //销售类型
      this.postParams.repetition = this.repetition; // 是否重复

      this.postParams.type = "all";
      this.postParams.classId = this.dataVal;
      this.getRecordList();
    },
    structureChange(e) {
      if (e.value.length > 0) {
        this.$refs.usermul.delChoose();
        this.filterValue.deptIdArray = e.value;
        this.postParams.deptIdArray = e.value;
        this.postParams.dataType = 7;
        this.deptIdArray = e.value;
      } else {
        this.filterValue.deptIdArray = [];
        this.deptIdArray = [];
        this.postParams.deptIdArray = [];
        this.postParams.dataType = 5;
      }
      this.getRecordList();
    },
    structureChange1(e) {
      if (e.value.length > 0) {
        this.$refs.structurecell.delChoose();
        this.filterValue.userArray = e.value;
        this.postParams.userArray = e.value;
        this.postParams.dataType = 8;
        this.userArray = e.value;
      } else {
        this.filterValue.userArray = [];
        this.postParams.userArray = [];
        this.postParams.dataType = 5;
        this.userArray = [];
      }
      this.getRecordList();
    },
    radioMenuSelect() {
      if (this.filterDataType != "custom") {
        Lockr.set("crmWorkbenchRangeFilter", this.filterDataType);
        this.filterValue.dataType = this.filterDataType;
      } else {
        this.membersDepVisible = true;
      }
      this.$refs.structurecell.delChoose();
    },
    /**
     * 选择员工和部门
     */
    membersDepSelect(users, strucs) {
      if (!users.length && !strucs.length) {
        this.filterDataType = 1;
        this.filterValue.dataType = 1;
        this.filterValue.users = [];
        this.filterValue.strucs = [];
      } else {
        this.filterValue.dataType = 5;
        this.filterValue.users = users;
        this.filterValue.strucs = strucs;
      }
    },

    membersDepCancel(users, strucs) {
      if (this.filterValue.dataType != 5) {
        this.filterDataType = this.filterValue.dataType;
        this.filterValue.users = [];
        this.filterValue.strucs = [];
      }
    },
    /**
     * 获取相关列表
     */
    getRecordList(dataIndex) {
      this.dataIndex = dataIndex;
      this.list = [];
      this.loading = true;
      console.log(this.postParams);
      sourceRateStat(this.postParams)
        .then((res) => {
          this.loading = false;
          const data = res.data || {};
          this.list = data || [];
          this.coutListtip = this.list[data.length - 1];
          console.log("coutListtipcoutListtip", this.coutListtip, this.list);
          this.list.splice(data.length - 1, 1);
        })
        .catch(() => {
          this.loading = false;
        });
    },

    /**
     * 导出点击
     */
    exportClick() {
      this.requestExportInfo(sourceRateStatExportAPI, this.postParams);
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../styles/detail.scss";
</style>

<style scoped lang="scss">
.autoTable{
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 0;
  background: #e1e1e1;
  margin-top: 5px;
  div{
    text-align: center;
    width: 14.3%;
  }
}
/deep/.block .block_reshow {
  left: -4vw;
}
/deep/ .blockUser .block_reshow {
  left: -8vw;
}

.xh-structure-cell,
.xh-struc-user-cell-mul {
  margin-right: 15px;
}
.head {
  position: absolute;
  padding: 15px 76px;
  top: 0;
  right: 0;
  left: 0;
  background: #fff;
  z-index: 1;
  // padding-left: 40px;

  &__body {
    position: relative;
    .user-box {
      width: unset;
      height: 36px;
      padding: 4px 7px;
      border: 1px solid #e1e1e1;
      border-radius: $xr-border-radius-base;
      background-color: white;
      margin-right: 20px;
      display: flex;
      cursor: pointer;
      .user-icon {
        background: $xr-color-primary;
        color: white;
        padding: 5px 6px;
        border-radius: 50%;
      }
      .username {
        font-size: 12px;
        margin: 0 8px;
      }
    }
    .el-radio-group {
      /deep/ .el-radio-button__inner {
        font-size: 12px;
        padding: 11px 12px;
      }
    }
    /deep/ .type-select {
      height: 36px;
    }

    .sort-btn {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}
</style>
